<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label>
      <span>网站名</span>
      <input type="text" name="sitename" />
    </label>
    <br />
    <label>
      <span>网址</span>
      <input type="text" name="siteurl" />
    </label>
    <br />
    <button class="add">新增记录</button>

    <hr />
    <label>
      <span>网站名</span>
      <input type="text" name="findname" />
    </label>
    <button class="find">查询记录</button>
    <div class="res">...</div>
    <hr />

    <table border="1">
      <thead>
        <td>网站名</td>
        <td>网址</td>
      </thead>
      <!-- <tr>
        <td>baidu</td>
        <td>baiud.com</td>
      </tr> -->
      <tbody></tbody>
    </table>

    <!-- <script>
      let sitenameDom = document.querySelector("input[name=sitename]");
      let siteurlDom = document.querySelector("input[name=siteurl]");
      let addDom = document.querySelector("button.add");

      addDom.onclick = function () {
        // console.log(sitenameDom.value, siteurlDom.value);

        // key:123 value:456
        localStorage.setItem(sitenameDom.value, siteurlDom.value);
      };

      for (let i = 0; i < localStorage.length; i++) {
        console.log(
          localStorage.key(i),
          localStorage.getItem(localStorage.key(i))
        );

        let tr = document.createElement("tr");
        let td = document.createElement("td");
        let td2 = document.createElement("td");
        td.innerText = localStorage.key(i);
        td2.innerText = localStorage.getItem(localStorage.key(i));
        tr.appendChild(td);
        tr.appendChild(td2);
        document.querySelector("table").appendChild(tr);
      }
    </script> -->

    <script>
      let sitenameDom = document.querySelector("input[name=sitename]");
      let siteurlDom = document.querySelector("input[name=siteurl]");
      let findnameDom = document.querySelector("input[name=findname]");
      let addDom = document.querySelector("button.add");
      let findDom = document.querySelector("button.find");

      const getSites = () => {
        let sites = JSON.parse(localStorage.getItem("sites")) || [];

        var html = "";
        sites.forEach((site) => {
          html += `<tr><td>${site.name}</td><td>${site.url}</td></tr>`;
        });
        document.querySelector("table tbody").innerHTML = html;
      };

      addDom.onclick = function () {
        let sites = JSON.parse(localStorage.getItem("sites")) || [];

        sites.push({
          name: sitenameDom.value,
          url: siteurlDom.value,
        });
        // console.log(sites);
        localStorage.setItem("sites", JSON.stringify(sites));

        getSites();
      };

      getSites();

      //   查找

      findDom.onclick = function () {
        let sites = JSON.parse(localStorage.getItem("sites")) || [];
        // console.log(sites, findnameDom.value);

        var res = sites.find((site) => site.name === findnameDom.value);
        console.log(res);

        document.querySelector(".res").innerHTML = JSON.stringify(res);
      };
    </script>
  </body>
</html>
